<template>
  <div>
    <div class="i-box" style="--h: 3rem;">
      <XmolBox title="XbarRanking" style="--freeH: 100%">
        <XbarRanking v-if="showChart" :seriesData="seriesData" :xAxis="xAxis" :itemTitleTop="true"></XbarRanking>
      </XmolBox>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<XbarRanking v-if="showChart" :seriesData="seriesData" :xAxis="xAxis" :itemTitleTop="true"></XbarRanking>`'></div>
      </div>
      <div>
        <p class="tt">seriesData</p>
        <p><span class="td">数据参考：</span>{{seriesData}}</p>
      </div>
      <div>
        <p class="tt">xAxis</p>
        <p><span class="td">数据参考：</span>{{xAxis}}</p>
      </div>
      <div>
        <p class="tt">itemTitleTop（标题放在上方）</p>
        <p><span class="td">默认：</span><el-tag size="mini" type="success" class="mr10">false</el-tag></p>
      </div>
    </section>

    <div class="i-box" style="--h: 3rem;margin-top: 1rem">
      <div class="grid" style="--row: 1;">
        <XmolBox title="XbarStackRanking" style="--freeH: 100%">
          <XbarStackRanking :seriesData="seriesData1" :xAxis="xAxis1" :itemTitleTop="true" v-if="showChart1"></XbarStackRanking>
        </XmolBox>
        <XmolBox title="XbarStackRanking" style="--freeH: 100%">
          <XbarStackRanking :seriesData="seriesData2" :xAxis="xAxis2" :itemTitleTop="true" v-if="showChart1" :seriesLabelSet="seriesLabelSet" :tooltipSet="{show: false}"></XbarStackRanking>
        </XmolBox>
      </div>
    </div>

    <section class="content mt10">
      <div>
        <p class="tt">代码示例</p>
        <div v-text='`<XbarStackRanking :seriesData="seriesData1" :xAxis="xAxis1" :itemTitleTop="true" v-if="showChart1"></XbarStackRanking>`'></div>
      </div>
      <div>
        <p class="tt">seriesData</p>
        <p><span class="td">数据参考：</span>{{seriesData1}}</p>
      </div>
      <div>
        <p class="tt">xAxis</p>
        <p><span class="td">数据参考：</span>{{xAxis1}}</p>
      </div>
      <div>
        <p class="tt">itemTitleTop（标题放在上方）</p>
        <p><span class="td">默认：</span><el-tag size="mini" type="success" class="mr10">false</el-tag></p>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 排行榜
      seriesData: [],
      xAxis: [],
      showChart: false,
      seriesData1: [],
      xAxis1: [],
      showChart1: false,
      // demo
      seriesData2: [ { 'name': '自主研发', 'data': [ { 'value': 20 } ] }, { 'name': '合作开发', 'data': [ { 'value': 10 } ] }, { 'name': '引进', 'data': [ { 'value': 5 } ] } ],
      xAxis2: [''],
      seriesLabelSet: {
        formatter: `{a} {c}`,
        offset: [0, -20]
      }
    };
  },
  mounted () {
    this.getSeriesData();
  },
  methods: {
    getSeriesData () {
      let res = {'status': {'code': 200, 'msg': '服务请求成功'}, 'data': [{'indexCount': 21, 'indexName': '邮储银行信贷金额（企业）', 'indexValue': null, 'areaName': null}, {'indexCount': 19, 'indexName': '重庆富民银行信贷金额（企业）', 'indexValue': null, 'areaName': null}, {'indexCount': 18, 'indexName': '建设银行信贷金额（企业）', 'indexValue': null, 'areaName': null}, {'indexCount': 17, 'indexName': '三湘银行信贷金额（企业）', 'indexValue': null, 'areaName': null}, {'indexCount': 16, 'indexName': '上海银行信贷金额（企业）', 'indexValue': null, 'areaName': null}]};
      let res1 = {'status': {'code': 200, 'msg': '服务请求成功'}, 'data': [{'enterpriseId': 179, 'name': '抚州市三江镇瑞旺养殖场', 'scale': 3500, 'yearSlaughterNum': 3500, 'yearPigletSlaughterNum': 0, 'dailyHandlingNum': 0, 'principal': '郑惠萍', 'areaName': '抚州市/临川区', 'address': '德科产业园', 'establishedTime': '2021-10-27', 'employeesNum': 1000, 'enterpriseType': 0, 'iotEnterpriseId': null}, {'enterpriseId': 222, 'name': '抚州市厦门猪场', 'scale': 2000, 'yearSlaughterNum': 1000, 'yearPigletSlaughterNum': 1000, 'dailyHandlingNum': 0, 'principal': '郑惠萍', 'areaName': '抚州市/资溪县', 'address': '猪场', 'establishedTime': '2015-10-10', 'employeesNum': 100, 'enterpriseType': 0, 'iotEnterpriseId': null}, {'enterpriseId': 333, 'name': '抚州市南丰县诚速猪场', 'scale': 1566, 'yearSlaughterNum': 841, 'yearPigletSlaughterNum': 725, 'dailyHandlingNum': 0, 'principal': '张彬楠', 'areaName': '抚州市/南丰县', 'address': '莱溪乡', 'establishedTime': '1993-01-03', 'employeesNum': 66, 'enterpriseType': 0, 'iotEnterpriseId': null}, {'enterpriseId': 344, 'name': '抚州市崇仁县罗林猪场', 'scale': 1550, 'yearSlaughterNum': 907, 'yearPigletSlaughterNum': 643, 'dailyHandlingNum': 0, 'principal': '郑惠萍', 'areaName': '抚州市/崇仁县', 'address': '三山乡', 'establishedTime': '2002-03-28', 'employeesNum': 74, 'enterpriseType': 0, 'iotEnterpriseId': null}, {'enterpriseId': 337, 'name': '抚州市金溪县禾农猪场', 'scale': 1530, 'yearSlaughterNum': 614, 'yearPigletSlaughterNum': 916, 'dailyHandlingNum': 0, 'principal': '胡小满', 'areaName': '抚州市/金溪县', 'address': '何源镇', 'establishedTime': '2004-05-26', 'employeesNum': 82, 'enterpriseType': 0, 'iotEnterpriseId': null}], 'total': 26};
      let dealData = this.dealBarRankingData(res.data || []);
      let dealData1 = this.dealDataBarRankingsData(res1.data || [], ['商品猪年出栏量', '种猪年出栏量']);
      this.seriesData = dealData.seriesData;
      this.xAxis = dealData.xAxis;
      this.showChart = true;
      this.seriesData1 = dealData1.seriesData;
      this.xAxis1 = dealData1.xAxis;
      this.showChart1 = true;
    },
    /** 排行榜数据处理方法 */
    dealBarRankingData (data) {
      let xAxis = [];
      let seriesData = [];
      data.map(o => {
        // 处理饼图数据
        let name = o.indexName;
        // 处理排行数据
        seriesData.unshift(o.indexCount);
        xAxis.unshift(name);
      });
      return {
        xAxis: xAxis,
        seriesData: seriesData
      };
    },
    dealDataBarRankingsData (data, name) {
      name = name || [];
      let xAxis = [];
      let seriesData = [];
      let data1 = [];
      let data2 = [];
      data.map(o => {
        data1.unshift({
          value: o.yearSlaughterNum || 0
        });
        data2.unshift({
          value: o.yearPigletSlaughterNum || 0
        });
        xAxis.unshift(o.name);
        seriesData = [
          {name: name[0], data: data1},
          {name: name[1], data: data2}
        ];
      });
      return {
        xAxis: xAxis,
        seriesData: seriesData
      };
    }
  }
};
</script>
